<template>
  <div class="tag-input-container">
    <h3 class="title">推荐场景</h3>
    <div class="tag-list">
      <span v-for="(tag, index) in tags" :key="index" class="tag">
        {{ tag }}
        <span class="close-icon" @click="removeTag(index)" v-if="tagsData.isNone =='1'">×</span>
      </span>
      <input
        v-if="tagsData.isNone =='1'&&tags.length < 3"
        v-model="newTag"
        @keyup.enter="addTag"
        placeholder="输入并按回车创建"
        class="input-field"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const newTag = ref('');
const tags = ref<string[]>([]);
const emits = defineEmits(['addTag']);
const tagsData = defineProps(['recomScene', 'isNone']);
watch(
  () => tagsData.recomScene,
  (newTags) => {
    if (newTags) {
     tags.value = newTags.split(',') || [];
    }else{
      tags.value = [];
    }
  },
  { immediate: true }
);
const addTag = () => {
  if (newTag.value.trim() !== '') {
    tags.value.push(newTag.value.trim());
    newTag.value = '';
    emits('addTag', tags.value);
  }
};

const removeTag = (index: number) => {
  tags.value.splice(index, 1);
  emits('addTag', tags.value);
};
</script>

<style lang="scss" scoped>
.tag-input-container {
  background: #fafafa;
  padding: 16px;
  border-radius: 12px 12px 12px 12px;
  border: 1px solid #e7e7e7;

  .title {
    font-weight: bold;
    margin-bottom: 8px;
  }

  .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .tag {
      background-color: #f0f0f0;
      padding: 4px 8px;
      border-radius: 16px;
      display: flex;
      height: 24px;
      font-size: 15px;
      align-items: center;

      .close-icon {
        margin-left: 4px;
        cursor: pointer;
      }
    }

    .input-field {
      padding: 2px 8px;
      border: none;
      border-radius: 16px;
      outline: none;
      font-size: 13px;
      width: 138px;
      height: 24px;
      background: rgba(220, 220, 220, 0.3);
      border-radius: 12px 12px 12px 12px;
    }
  }
}
</style>
